<template>
  <mescroll-vue ref="mescroll" :down="mescrollDown" @init="mescrollInit">
    <div class="student_orderHistoryList">
      <el-col v-for="(item, index) in orderHistoryList" :key="index">
        <el-card shadow="never">
          <p class="endTime">{{ item.createdTime }}</p>
          <span class="faultClass">{{ item.faultClass }}</span>
          <el-rate
            v-model="item.grade"
            disabled
            show-text
            text-color="#ff9900"
            :allow-half="true"
            v-if="item.message != null"
          ></el-rate>
          <span class="notMessage" v-if="item.message == null">未评价</span>
          <el-button
            type="text"
            class="showDetails"
            @click="orderPass(item)"
            v-if="item.message != null"
            >点击查看详情</el-button
          >
          <el-button
            type="text"
            class="showDetails"
            @click="sendMessage(item)"
            v-if="item.message == null"
            >点击评价</el-button
          >
        </el-card>
      </el-col>
    </div>
  </mescroll-vue>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  components: {
    MescrollVue // 注册mescroll组件
  },
  inject: ['reload'],
  created() {
    this.getData()
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.downCallback
      },
      orderHistoryList: []
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    downCallback() {
      setTimeout(() => {
        this.getData()
        this.mescroll.endSuccess()
      }, 1000)
    },
    loadData(item) {
      if (item.urls !== null && item.urls.length > 3) {
        item.urls = item.urls.split(' ')
      }
    },
    orderPass(item) {
      this.loadData(item)
      this.$router.push({
        // 这里必须使用 name，不能使用 path
        name: 'detailsPage',
        params: {
          item: item
        }
      })
    },
    sendMessage(item) {
      this.loadData(item)
      this.$router.push({
        name: 'detailsPage',
        params: {
          item: item
        }
      })
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    getData() {
      // 一开始获取订单列表
      this.$http
        .get('student/order-list')
        .then(res => {
          this.orderHistoryList = res.data.data
          // 再排序一下数组（正在处理的状态置顶）
          // 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
          // 若 a 等于 b，则返回 0。
          // 若 a 大于 b，则返回一个大于 0 的值。
          this.structureData()
        })
        .catch(() => {
          return this.$message.error('获取订单列表失败')
        })
    },
    structureData() {
      this.orderHistoryList.sort((a, b) => {
        if (a.message && b.message) {
          return 0
        } else if (a.message && !b.message) {
          return 1
        } else if (!a.message && b.message) {
          return -1
        } else {
          return 0
        }
      })

      // 处理下时间格式 计算一下分数（除 2）
      for (const item of this.orderHistoryList) {
        item.createdTime = this.getLocalTime(item.createdTime)
        item.endTime = this.getLocalTime(item.endTime)
        item.grade = item.grade / 2
      }
    }
  }
}
</script>

<style  lang="less" scoped>
.student_orderHistoryList /deep/ .el-dialog {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(58, 58, 58, 0.596);
  .el-dialog__body {
    padding: 10px 20px;
  }
  .orderItem {
    span {
      display: block;
      text-align: center;
    }
    span:first-child {
      font-size: 15px;
      margin-top: 8px;
      font-weight: bold;
    }

    span:last-child {
      color: rgb(129, 129, 129);
    }
  }
}

.student_orderHistoryList /deep/ .endOrder {
  .el-dialog__body {
    background-color: #bccdcd;
  }
  .sendBox {
    margin: 10px;
    background-color: white;
    border-radius: 10px;
    height: 150px;
  }
}

.innerEndOrder /deep/ .el-dialog {
  border-radius: 10px;
  .el-dialog__body {
    padding-top: 0;
  }
  .el-button {
    position: relative;
    left: 50%;
    transform: translate(-50%, 50%);
    box-shadow: 0 0 5px rgba(58, 58, 58, 0.596);
  }
}

.my_title {
  font-weight: bold;
  margin-top: 20px;
  display: block;
}

.sendBox .el-rate /deep/ .el-rate__icon {
  font-size: 35px;
}

.el-card {
  width: 99%;
  height: 150px;
  box-shadow: 0 3px 3px rgb(207, 207, 207);
  border-radius: 20px;
  position: relative;
  margin-top: 5%;
  .endTime {
    font-size: 10px;
    position: absolute;
    right: 10%;
    color: #9a9d9d;
  }
  .faultClass {
    font-size: 20px;
    font-weight: bold;
  }
  .showDetails {
    position: absolute;
    right: 10%;
    bottom: 15%;
  }
  .notMessage {
    display: block;
    font-size: 20px;
    margin-top: 30px;
    margin-left: 20px;
  }
  .el-rate {
    margin-top: 10%;
  }
}
</style>
